<template>
  <el-card>
    <el-table border stripe :data="skuList">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="名称" prop="skuName"></el-table-column>
      <el-table-column label="描述" prop="skuDesc"></el-table-column>
      <el-table-column label="默认图片">
        <template v-slot="{ row, $index }">
          <img :src="row.skuDefaultImg" alt="" style="width: 80px; height: 80px" />
        </template>
      </el-table-column>
      <el-table-column label="重量(KG)" prop="weight"></el-table-column>
      <el-table-column label="价格(元)" prop="price"></el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template v-slot="{ row, $index }">
          <el-button
            @click="cancelSale(row)"
            v-if="row.isSale"
            type="success"
            size="small"
            icon="ele-ArrowUp"
            title="下架"
          ></el-button>
          <el-button
            @click="toOnline(row)"
            v-else
            type="info"
            size="small"
            icon="ele-ArrowDown"
            title="上架"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            icon="ele-Edit"
            title="编辑sku"
            @click="ElMessage.success('正在开发中')"
          ></el-button>
          <el-button type="info" @click="showSkuInfo(row)" size="small" icon="ele-InfoFilled"></el-button>
          <el-popconfirm title="你确定要删除该条sku吗?" @confirm="delSku(row)">
            <template #reference>
              <el-button type="danger" size="small" icon="ele-Delete" title="删除sku"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- @size-change="handleSizeChange"
      @current-change="handleCurrentChange" -->
    <el-pagination
      v-model:current-page="page"
      v-model:page-size="limit"
      layout="prev, pager, next, jumper"
      :total="total"
      @current-change="getSkuList"
    />
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" :with-header="false" size="50%">
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">名称</el-col>
        <el-col :span="16" :offset="0">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">描述</el-col>
        <el-col :span="16" :offset="0">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">价格</el-col>
        <el-col :span="16" :offset="0">{{ skuInfo.price }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">平台属性</el-col>
        <el-col :span="16" :offset="0">
          <el-tag type="danger" v-for="attrvalue in skuInfo.skuAttrValueList">{{ attrvalue.attrName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">销售属性</el-col>
        <el-col :span="16" :offset="0">
          <el-tag type="danger" v-for="skuSaleAttrValue in skuInfo.skuSaleAttrValueList">{{
            skuSaleAttrValue.saleAttrValueName
          }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0">商品图片</el-col>
        <el-col :span="16" :offset="0">
          <!-- 走马灯组件只有height属性没有width属性 -->
          <el-carousel trigger="click" height="400px" v-if="skuInfo.skuImageList.length">
            <el-carousel-item v-for="skuImg in skuInfo.skuImageList" :key="skuImg.id">
              <img style="width: 100%; height: 100%" :src="skuImg.imgUrl" alt="" />
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";
export default defineComponent({
  name: "Sku",
});
</script>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import type { SkuData } from "@/api/sku";
import skuApi from "@/api/sku";

// 分页
const page = ref(1);
const limit = ref(10);
const total = ref(0);

// 列表数据
const skuList = ref<SkuData[]>([]);

// 请求sku列表数据
const getSkuList = async (num: number = 1) => {
  page.value = num;
  try {
    const res = await skuApi.getPageList(page.value, limit.value);
    console.log(res.total);

    total.value = res.total;
    skuList.value = res.records;
  } catch (error) {
    ElMessage.error("获取数据失败");
  }
};
onMounted(() => {
  getSkuList();
});
// 控制点击按钮上线
const toOnline = async (row: SkuData) => {
  try {
    await skuApi.onSale(row.id as number);
    ElMessage.success("上线成功");
    getSkuList();
  } catch (error) {
    ElMessage.error("上线失败");
  }
};

// 点击下线
const cancelSale = async (row: SkuData) => {
  try {
    await skuApi.cancelSale(row.id as number);
    ElMessage.success("下线成功");
    getSkuList();
  } catch {
    ElMessage.error("下线失败");
  }
};

// 删除sku
const delSku = async (row: SkuData) => {
  try {
    await skuApi.deleteSku(row.id as number);
    ElMessage.success("删除成功");
    getSkuList();
  } catch (error) {
    ElMessage.error("删除失败");
  }
};

// 抽屉
const drawer = ref(false);
// 抽屉数据
const skuInfo = ref<SkuData>({
  spuId: 0,
  price: 0,
  skuName: "",
  skuDesc: "",
  weight: "",
  tmId: 0,
  category3Id: 0,
  skuDefaultImg: "",
  skuImageList: [],
  skuAttrValueList: [],
  skuSaleAttrValueList: [],
});
const showSkuInfo = async (row: SkuData) => {
  // 清空数据
  skuInfo.value = {
    spuId: 0,
    price: 0,
    skuName: "",
    skuDesc: "",
    weight: "",
    tmId: 0,
    category3Id: 0,
    skuDefaultImg: "",
    skuImageList: [],
    skuAttrValueList: [],
    skuSaleAttrValueList: [],
  };
  // 根据列表拿到的id请求sku详细信息
  drawer.value = true;

  try {
    const res = await skuApi.getById(row.id as number);
    skuInfo.value = res;
  } catch (error) {
    ElMessage.error("获取失败");
  }
};
</script>

<style lang="scss" scoped>
// 在style当中去写样式 天极爱scoped之后
// 有些样式是生效的，有些样式是不生效的
// 1、在外面重新写一个style不加scoped
// 2、在scoped的style当中写样式的时候，把不生效的选择器前面加:deep() //深度作用选择器
.el-row {
  height: 40px;
  line-height: 40px;
  .el-col-6 {
    font-size: 20px;
    font-weight: bold;
    text-align: right;
  }
  .el-col-16 {
    // 块级作用域才能做
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

// 走马灯
.el-carousel {
  width: 400px;
  height: 400px;
}

:deep(.el-carousel__indicator) {
  button {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }
}
</style>
